<template>
    <div style="height: 100%">
    	<el-table :data="tableData" border highlight-current-row @selection-change="selectionChange" @row-contextmenu="rowContextmenu">
    		<el-table-column type="selection" align="center"></el-table-column>
            <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
            <el-table-column property="name" label="名称" align="center"></el-table-column>
            <el-table-column property="category" label="部门类型" align="center">
                <template slot-scope="scope">
                    <span v-for="(item, index) in departmentType" :key="index">{{item['id'] == scope.row.category ? item['detailedName'] : ''}}</span>
                </template>
            </el-table-column>
            <el-table-column property="supervisor" label="部门主管" align="center">
                <template slot-scope="scope">
                    <span v-for="item in supervisor" :key="item['id']">
                        <i v-if="item['id'] == scope.row.supervisor" style="font-style: normal">{{ item['name'] }}</i>
                    </span>
                </template>
            </el-table-column>
            <el-table-column property="remark" label="备注" align="center"></el-table-column>
            <el-table-column property="locks" label="状态" align="center">
                <template slot-scope="scope">
                    <span style="color: green;" v-if="scope.row.locks == 1">已启用</span>
                    <span style="color: red;" v-else>已禁用</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="update(scope.row.id)">修改</el-button>
                </template>
            </el-table-column>
    	</el-table>
    </div>
</template>
<script>
export default {
	data() {
		return {
			tableData: this.$store.state.departmentStore.tableData,
			departmentType: this.$store.state.departmentStore.departmentType,		//部门类型
			supervisor: this.$store.state.departmentStore.supervisor,			//部门主管
		}
	},
    computed: {
        systemId() {
            return this.$store.state.systemId;
        }
    },
	methods: {
		selectionChange(arr) {
            this.$store.commit('departmentStore/multipleSelection', arr);
		},
        refresh() {
            const loading = this.$loading({
                lock: true,
                text: '数据刷新中...',
                spinner: 'el-icon-loading',
                background: '#fff'
            });
            setTimeout(() => {
                loading.close();
            }, 1000);
        },
		update(id) {
            this.$store.commit('departmentStore/updateRowId', id);
            this.$util.openLayerIframe({title: '部门资料-修改', zIndex: 13, width: '600px', height: '480px', url: this.$domain + '/#/basicData/department/form'});
		},
        del(row) {          //右键删除
            let type = {
                headers: {
                    'Content-Type': 'application/json'
                }
            }
            if(row['subDepartment'].length > 0) {
                this.$message({message: '删除失败，该节点包含子节点', duration: 1500, type: 'warning'});
                return false;
            }
            this.$confirm('确定删除该部门?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.post('department/deleteById', JSON.stringify([row['id']]), type).then(res => {
                    if(res.data.code == 20001) {
                        this.$message({message: '删除部门成功', duration: 1500, type: 'success'});
                        this.$store.commit('departmentStore/updateExpandNodeId', row['parentId'] == 0 ? this.systemId : row['parentId']);
                        setTimeout(() => {
                            this.$store.dispatch('departmentStore/getTreeData');            //刷新数据
                        }, 1000);
                    } else {
                        this.$message.error(res.data.msg || '删除部门失败');
                    }
                });
            });
        },
        disabedBtn(status, msg, row) {      //右键禁用、启用
            var type = {
                headers: {
                    'Content-type': 'application/json;charset=UTF-8'
                }
            }
            if(row['locks'] == status) {
                this.$alert(msg + '失败，其中包含已'+ msg +'选项，重新选择！', msg + '提示', {
                    confirmButtonText: '确定'
                });
                return false;
            }
            this.$http.post('department/enable?state=' + status, JSON.stringify([row['id']]), type).then(res => {
                if(res.data.code == 20001) {
                    this.$message({message: msg + '成功', type: 'success', duration: 2000});
                    //更新要展开高亮的节点id
                    this.$store.commit('departmentStore/updateExpandNodeId', row['parentId'] == 0 ? this.systemId : row['parentId']);
                    setTimeout(() => {
                        this.$store.dispatch('departmentStore/getTreeData');
                    }, 1000);
                }
            });
        },
        rowContextmenu(row, event) {          //右键菜单

        }
	},
	created() {
		this.$store.dispatch('departmentStore/getDepartementType');				//部门类型
		this.$store.dispatch('departmentStore/getSupervisor');				//部门主管
	}
}
</script>